<template>
  <div v-bind:class="[active?  'menu-container-active': 'menu-container']">
    <div class="parbase navigation">
      <div class="transition-wrapper">
        <h3 class="menu-heading">
          功能列表</h3>
        <nav>
          <ul role="menu">

            <li class="nav-home" v-for="topMenu in topMenus">
              <a @click="navigate(topMenu.url, topMenu.menuId)" class="primary-menu-item">
                <span class="link-text "><Icon :type="topMenu.icon"></Icon>{{topMenu.name}} </span>
              </a>
            </li>

          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    name: 'main-menu',
    props: ['active'],
    data () {
      return {
        topMenus: [],
        foo: 'foo'
      }
    },
    created () {
      this.fetchData()
    },
    methods: {
      navigate (url, param) {
        this.$router.push({path: url, query: {menuId: param}})
      },
      fetchData () {
        this.$http.get('/sys/menu/list?parentId=0').then(response => {
          if (response.data.success !== true) {
            this.$Message.error(response.data.msg)
          } else {
            this.topMenus = response.data.obj.list
          }
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @media screen and (min-width: 768px){
    menu-container-active{
      background-color: #fff;
      border-bottom: 0;
      border-top: 1px solid transparent;
      display: block;
      left: auto;
      overflow: inherit;
      position: relative;
      right: auto;
      top: 0;
      transform: none;
      width: 100%;
      z-index: 2;
      box-shadow: 0px 2px 2px #c4c4c4
    }
  .menu-container {
    background-color: #fff;
    border-bottom: 0;
    border-top: 1px solid transparent;
    display: block;
    left: auto;
    overflow: inherit;
    position: relative;
    right: auto;
    top: 0;
    transform: none;
    width: 100%;
    z-index: 2;
    box-shadow: 0px 2px 2px #c4c4c4
  }
    .menu-container .transition-wrapper {
      backface-visibility: hidden;
      transition: none 0s ease 0s;
      width: 100%;
      display: block;
      position: relative;
      right: 0;
      transform: translateX(0px);
    }

    .menu-container .menu-heading {
      display: none;
    }

    .menu-container .menu-heading {
      background-color: #006564;
      border-bottom: 2px solid rgba(118, 118, 118, 0.1);
      color: #fff;
      font-weight: 200;
      margin: 0;
      min-height: 2.6875em;
      padding: 0.548em;
      text-align: center;
      width: 100%;
    }

    .menu-container .transition-wrapper > nav {
      background-color: #fff;
      margin: auto;
      width: 960px;
      display: block;
    }

    .menu-container ul {
      display: table;
      width: 100%;
    }

    ul {
      list-style: outside none none;
      margin: 0;
      padding: 0;
    }

    .menu-container li::before {
      content: none;
    }

    ul > li::before {
      color: #8e8573;
      font-size: 1.385em;
      left: 0;
      position: absolute;
      top: -4px;
    }

    .menu-container li {
      display: table-cell;
      font-size: 14px;
      padding: 0;
      text-align: center;
      position: static;
      color: #d7d7d7;
    }

    .menu-container li > a {
      display: block;
      padding: 0.18em 0;
      position: relative;
      width: 100%;
      color: #4c4c4c;
      font-weight: 300;
      text-decoration: none;
    }

    .menu-container li > a .link-text {
      border-left: 1px dotted #d7d7d7;
      display: block;
      margin: 0.825em 0 0.725em;
      padding: 0 0.92em;
      width: 100%;
      color: #3d3d3d;
    }

    .menu-container li > a .link-text:hover, .menu-container li > a .link-text:active {
      color: #c2262e;
    }

    .menu-container .primary-menu-item:hover::after, .menu-container .primary-menu-item-direct-link:hover::after, .menu-container .primary-menu-item:focus::after, .menu-container .primary-menu-item-direct-link:focus::after {
      border-bottom: 4px solid #c2262e;
      bottom: -2px;
      content: "";
      left: 0;
      position: absolute;
      width: 100%;
    }

    .no-touch .menu-container li:hover, .menu-container li:active {
      border-bottom: 2px solid #c2262e;
    }

    .menu-container li > a:focus {
      color: #c2262e;
    }

    .menu-container li:hover > a {
      color: #c2262e;
    }

    .menu-container .router-link-active {
      color: #c2262e
    }
 }
  @media screen and (min-width: 0) and (max-width: 767px){

    .menu-container-active {
      backface-visibility: hidden;
      background-color: #ebedec;
      display: block;
      height: 100%;
      left: calc(-2px);
      position: absolute;
      right: 100%;
      top: 0;
      width: 70%;
      z-index: -3;
      border-right: 2px solid #fff;
      transform:translate(0, 0);
      transition-duration: 0.4s;
      transition-property: transform;
      transition-timing-function: ease-in-out;
    }
    .menu-container {
      backface-visibility: hidden;
      background-color: #ebedec;
      display: block;
      height: 100%;
      left: calc(-2px);
      position: absolute;
      right: 100%;
      top: 0;
      width: 70%;
      z-index: -3;
      border-right: 2px solid #fff;
      transform:translate(-100%, 0px);
      transition-duration: 0.4s;
      transition-property: transform;
      transition-timing-function: ease-in-out;
    }

    .parbase::before, .parbase::after {
      content: " ";
      display: table;
    }

    .menu-container-active .transition-wrapper {
      backface-visibility: hidden;
      display: block;
      position: relative;
      right: 0;
      transform: translateX(0px);
      height: 100%;
    }

    .menu-container-active .menu-heading {
      background-color: #0288d1;
      border-bottom: 2px solid rgba(118, 118, 118, 0.1);
      color: #fff;
      font-weight: 200;
      margin: 0;
      min-height: 2em;
      padding: 0.548em;
      text-align: center;
      width: 100%;
    }
    .menu-container-active .transition-wrapper > nav {
      background-color: #fff;
      width: 100%;
      display: block;
      height: 100%
    }

    .menu-container-active li::before {
      content: none;
      color: #8e8573;
      font-size: 15px;
      left: 0;
      position: absolute;
      top: -4px;
    }

    .menu-container-active li > a {
      color: #4c4c4c;
      display: block;
      padding: 0.5em 1em 0.5em 0.75em;
      text-decoration: none;
    }
    .menu-container-active li {
      border-bottom: 1px solid #d7d7d7;
      color: #4c4c4c;
      padding: 0;
      position: static;
      font-size: 16px;
    }

  }


</style>
